<template>
    <div class = "zoom-wrapper jimu-map-panel">
		<div class = "zoom-in tool-box" @click="zoomInClick">
			<i class = "iconfont icon-add"></i>
		</div>
		<div class = "zoom-out tool-box" @click="zoomOutClick">
			<i class = "iconfont icon-jian"></i>
		</div>
		<div class = "full-screen tool-box" @click="fullScreenClick">
			<i class = "iconfont icon-quanping"></i>
		</div>
    </div>
</template>

<script>
import BaseWidget from '@/jimu/BaseWidget.js'
import { Tooltip } from 'element-ui'
export default {
	name: 'MapToolsWidget',
	mixins:[ BaseWidget ],
	components: {
		'el-tooltip': Tooltip
	},
	data () {
		return {
			
		}
	},

	created: function () {
	
	},
	computed: {
		map: {
			get:function(){
				return this.shareState.map
			}
		}
	},
	methods:{
		zoomInClick: function(){
			this.map.zoomIn()
		},
		zoomOutClick: function(){
			this.map.zoomOut()
		},
		fullScreenClick: function(){
			if(document.fullScreen||document.mozFullScreen||document.webkitIsFullScreen){
				document.exitFullscreen?document.exitFullscreen():
				document.mozCancelFullScreen?document.mozCancelFullScreen():
				document.webkitExitFullscreen?document.webkitExitFullscreen():'';
			}else{
				var el = document.documentElement;
				var rfs = el.requestFullScreen || el.webkitRequestFullScreen || 
					el.mozRequestFullScreen || el.msRequestFullScreen;
				if(typeof rfs != "undefined" && rfs) {
					rfs.call(el);
				} else if(typeof window.ActiveXObject != "undefined") {
					//for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
					var wscript = new ActiveXObject("WScript.Shell");
					if(wscript != null) {
						wscript.SendKeys("{F11}");
					}
				}
			}
			
		}
	}
}
</script>

<style lang="scss">
$boxWidth: 35px;
.zoom-wrapper{
	position: absolute;
	width: $boxWidth;
	z-index: 999px;
	.tool-box{
		width: $boxWidth;
		height: $boxWidth;
		text-align: center;
		line-height: $boxWidth;
		transition: all 0.3s;
		.iconfont{
			font-size: 20px;
		}
	}
	.tool-box:hover{
		width: $boxWidth;
		height: $boxWidth;
		color: #409eff;
		cursor: pointer;
	}
	.full-screen{
		font-size:16px;
	}
	
}
</style>